<?php
$seccion=1; 
include 'head.php';

if(empty($_GET)){
?> 
<div class="row">
	
	<div class="col-md-8">
		<table class="table">
		<thead>
			<tr>
				<th>id</th><th>Nombre</th><th>Fase</th><th>Estado</th><th>Acciones</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td><td>Planificación 2012</td><td>Retroalimentación</td><td>Terminado</td>
				<td>
					<a href="procesos.php?id"><span class="glyphicon glyphicon-list phi"></span></a>
				</td>	
			</tr>
			<tr>
				<td>2</td><td>Planificación 2013</td><td>Retroalimentación</td><td>En Proceso</td>
				<td>
					<a href="procesos.php?id"><span class="glyphicon glyphicon-list phi"></span></a>
				</td>	
			</tr>
			<tr>
				<td>2</td><td>Planificación 2014</td><td>Planificación</td><td>En Proceso</td>
				<td>
					<a href="procesos.php?id"><span class="glyphicon glyphicon-list phi"></span></a>
				</td>	
			</tr>													
		</tbody>
	</table>	    	
	</div>
</div>
<?php
}else{
	//Detalles del proceso enviado por GET
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.load('visualization', '1', {packages:['orgchart']});

	google.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = google.visualization.arrayToDataTable([
		  ['Equipos', 'Confirmaciones', 'Aceptaciones'],
		  ['Finanzas',  10,      5],
		  ['RRHH',  3,      0],
		  ['Ventas',  5,       5],
		  ['Marketing',  5,      2]
		]);
		var options = {
		  title: 'Confirmaciones - Aceptaciones',
		  vAxis: {title: 'Equipos',  titleTextStyle: {color: 'red'}}
		};
		var chart = new google.visualization.BarChart(document.getElementById('graficoAC'));
		chart.draw(data, options);
	}

	google.setOnLoadCallback(drawChart3);
	function drawChart3() {
		var data = google.visualization.arrayToDataTable([
		  ['Equipos', 'Confirmaciones'],
		  ['Finanzas',10],
		  ['RRHH',3],
		  ['Ventas',5],
		  ['Marketing',5]
		]);
		var options = {
		  title: 'Confirmaciones',
		  vAxis: {title: 'Equipos',  titleTextStyle: {color: 'red'}}
		};
		var chart = new google.visualization.BarChart(document.getElementById('graficoA'));
		chart.draw(data, options);
	}

  	
	google.setOnLoadCallback(drawChart2);
	function drawChart2() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Name');
		data.addColumn('string', 'Manager');
		data.addColumn('string', 'ToolTip');
		data.addRows([
		  [{v:'Gerencia', f:'Gerencia'}, '',''],
		  [{v:'Ventas', f:'Ventas'}, 'Gerencia',''],
		  ['Finanzas', 'Gerencia', ''],  
		  ['RRHH', 'Gerencia', ''],
		  ['Marketing', 'Ventas', '']
		]);
		var chart = new google.visualization.OrgChart(document.getElementById('organigrama'));
		chart.draw(data, {allowHtml:true,size:"large"});
	}
</script>


<div class="row">
	<div class="col-md-12 text-center">
		<h3 class="titulos_proc">
        	Información del proceso
        </h3>    	
	</div>
</div>

<div class="cont_graficos">
<div class="row">
	<div class="col-md-4">
		<table class="table">
			<tbody>
				<tr><th>Proceos</th><td>Planificación 2014</td></tr>
				<tr><th>Fase</th><td>Definición</td></tr>
				<tr><th>Estado</th><td>En proceso</td></tr>
				<tr><th>Inicio</th><td>14 de Febrero de 2014</td></tr>
				<tr><th>Finalizo</th><td>--</td></tr>
			</tbody>
		</table>
	</div>
	
	<div class="col-md-4">
		<div id="organigrama" style="width: 400px; height: 240px;"></div>
	</div>
</div>

</div>
<div class="row">
	<div class="col-md-12 text-center">
		<h3 class="titulos_proc">Proceso de Definición</h3>	
	</div>
</div>
<div class="cont_graficos">
<div class="row">
	<div class="col-md-6">
		
		<table class="table  table-bordered">
			<thead>
				<tr>
					<th>Equipo</th><th>Usuario</th><th>Confirmo</th><th>Acepto</th>
				</tr>
			</thead>
			<tbody>
				<tr><td rowspan="2">Finanzas</td>
					<td>Juan Possamay</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr class="danger">
					<td>Jose Perez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
				<tr><td rowspan="2">RRHH</td>
					<td>Pedro Fernandez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr>
					<td>Valentina Gonzalez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr><td rowspan="3">Ventas</td>
					<td>Caudia Ruiz</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr class="danger">
					<td>Hernan Flores</td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
				<tr class="danger">
					<td>Ines Blanco</td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
				<tr><td rowspan="3">Marketing</td>
					<td>Ana Rodriguez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr class="danger">
					<td>Pedro Gularte</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
				<tr class="danger"><td>Raul Gonzalez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<div class="col-md-4">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>Pendientes de confirmación</th><th>Notificar</th>
					</tr>
				</thead>
				<tbody>
					<tr><td>Jose Perez</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Hernan Flores</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Ines Blanco</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
				</tbody>
			</table>
			<table class="table table-hover">
				<thead>
					<tr>
						<th>Pendientes de aceptación</th><th>Notificar</th>
					</tr>
				</thead>
				<tbody>
					<tr><td>Jose Perez</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Hernan Flores</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Ines Blanco</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Pedro Gularte</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Raul Gonzalez</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
				</tbody>
			</table>	
	</div>
</div>
</div>
<div class="row">
	
	<div class="col-md-6" >
		<div id="graficoAC" style="width: 650px; height: 500px;"></div>
	</div>
</div>
<div class="row">
	<div class="col-md-12 text-center">
		<h3 class="titulos_proc">Proceso de Seguimiento</h3>	
	</div>
</div>
<div class="cont_graficos">
<div class="row">
	<div class="col-md-6">
		
		<table class="table  table-bordered">
			<thead>
				<tr>
					<th>Equipo</th><th>Usuario</th><th>Acepto</th>
				</tr>
			</thead>
			<tbody>
				<tr><td rowspan="2">Finanzas</td>
					<td>Juan Possamay</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr>
					<td>Jose Perez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr><td rowspan="2">RRHH</td>
					<td>Pedro Fernandez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr>
					<td>Valentina Gonzalez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr><td rowspan="3">Ventas</td>
					<td>Caudia Ruiz</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr class="danger">
					<td>Hernan Flores</td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
				<tr class="danger">
					<td>Ines Blanco</td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
				<tr><td rowspan="3">Marketing</td>
					<td>Ana Rodriguez</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr>
					<td>Pedro Gularte</td>
					<td><span class="glyphicon glyphicon-ok checkSI"></span></td>
				</tr>
				<tr class="danger"><td>Raul Gonzalez</td>
					<td><span class="glyphicon glyphicon-remove checkNO"></span></td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<div class="col-md-4">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>Pendientes de aceptación</th><th>Notificar</th>
					</tr>
				</thead>
				<tbody>
					<tr><td>Hernan Flores</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Ines Blanco</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
					<tr><td>Raul Gonzalez</td><td><span class="glyphicon glyphicon-envelope phi"></span></td></tr>
				</tbody>
			</table>	
	</div>
</div>
<div class="row">
	<div class="col-md-6" >
		<div id="graficoA" style="width: 650px; height: 500px;"></div>
	</div>
</div>
</div>
<?php 
}
include 'footer.php';
?>
